{% extends 'KoyaanGlobeBundle:Default:base.html.twig' %}
{% block title %}Squareglobe - {{name}}{% endblock %}
{% block header %}
<meta property="og:image" content="http://koyaan.com/squareglobe/image/{{ token }}.png"/>
<meta property="og:title" content="Squareglobe - {{name}}"/>
<meta property="og:url" content="http://koyaan.com/squareglobe/s/{{ token}}"/>
<meta property="og:description" content="Squareglobe visualizes your Foursquare checkin location data. Built upon WebGL Globe by the Google Data Arts Team"/>
{% endblock %}
{% block body %}
<div id="currentInfo">
    <span class="subject">{{name}}</span>
</div>
  
  <div id="notes">
      <p>Squareglobe visualizes your Foursquare checkin location data, up to 500 checkins per point are shown.</p><p> Click the link below to visualize your own foursquare data.</p><br/>
      <a class="myglobeLink" href="/squareglobe/my">Show my Globe</a>
      <img class="thumbnail" alt="{{name}}'s Squareglobe" src="/squareglobe/image/{{ token }}.png"/>
  </div>


  <script type="text/javascript" src="/bundles/koyaanglobe/js/third-party/Three/ThreeWebGL.js"></script>
  <script type="text/javascript" src="/bundles/koyaanglobe/js/third-party/Three/ThreeExtras.js"></script>
  <script type="text/javascript" src="/bundles/koyaanglobe/js/third-party/Three/RequestAnimationFrame.js"></script>
  <script type="text/javascript" src="/bundles/koyaanglobe/js/third-party/Three/Detector.js"></script>
  <script type="text/javascript" src="/bundles/koyaanglobe/js/third-party/Tween.js"></script>
  <script type="text/javascript" src="/bundles/koyaanglobe/js/globe.js"></script>
  <script type="text/javascript">
    if(!Detector.webgl){
      Detector.addGetWebGLMessage();
    } else {

      var subjects = ['self','recent'];
      var container = document.getElementById('container');
      var globe = new DAT.Globe(container);
      console.log(globe);
      var i, tweens = [];

      var setsubject = function(globe, t) {
        return function() {
          new TWEEN.Tween(globe).to({time:t},500).easing(TWEEN.Easing.Cubic.EaseOut).start();
        };
      };

      var xhr;
      TWEEN.start();

      
      xhr = new XMLHttpRequest();
      xhr.open('GET', '/squareglobe/getdata/{{token}}', true);

      xhr.onreadystatechange = function(e) {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            window.data = data;
            for (i=0;i<data.length;i++) {
              globe.addData(data[i][1], {format: 'magnitude', name: data[i][0], animated: true});
            }
            globe.createPoints();
            setsubject(globe,0)();
            globe.animate();
          }
        }
      };
      xhr.send(null);
    }
  </script>
{% endblock %}